<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="referrer" content="no-referrer" />
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>且陶陶</title>
    <style>
      body {
        margin: 0;
        height: 100vh;
        background-color: #eee;
      }
      /* * {
        border: 1px solid black;
      } */
      .yinying {
        box-shadow: 3px 3px 3px rgb(214, 209, 209);
      }
      .flex {
        display: flex;
      }
      .baise {
        background-color: white;
      }
      .flex1 {
        flex: 1;
      }
      .column {
        flex-direction: column;
      }
      .mg8 {
        margin: 8px;
      }
      .mgr8 {
        margin-right: 6px;
      }
      .mgt8 {
        margin-top: 8px;
      }
      .daohang {
        padding: 10px 20px;
        border-bottom: 1px solid rgb(165, 163, 163);
        font-size: 16px;
        color: #666;
      }
      .hongse {
        color: red;
      }
      /* 媒体查询，用于设置移动端或平板端等小屏幕的特殊样式 */
      @media (max-width: 600px) {
        .cebian {
          display: none; /* 当屏幕小于600px(一般手机大小)时侧边栏隐藏（不显示） */
        }
        .neirong {
          flex-direction: column;
        }
        .shujuqu {
          flex-direction: column;
        }
        .youqu {
          margin-left: 8px;
        }
        .shuju {
          margin: 0 0 8px;
          flex: auto;
        }
      }
    </style>
  </head>
  <body>
    <!--头部毕业照栏-->
    <div
      style="max-width: 760px; margin: auto; text-align: center; padding: 10px"
      class="yinying baise"
    >
      <img src="./img/001.jpg" alt="毕业鲜花照" width="384" height="284" />
      <p style="margin: 0px; font-size: 22px; font-family: 楷体">
        许先生&emsp;&emsp;&emsp;翟女士
      </p>
      <div
        style="margin: 2px; border-bottom: 2px solid rgb(255, 115, 40)"
      ></div>
    </div>
    <div
      style="
        max-width: 760px;
        margin: 0.5px auto;
        background-color: rgb(217, 243, 243);
        text-align: center;
        padding: 10px;
      "
      class="yinying"
    >
      <div>
        <p style="font-size: 18px">
          且陶陶&ensp;乐尽天真&emsp;几时归去&ensp;做个闲人
        </p>
      </div>
    </div>
    <div
      style="
        max-width: 760px;
        margin: 0.5px auto;
        background-color: white;
        text-align: center;
        padding: 10px;
      "
      class="yinying"
    >
      <!--音乐台-->
      <audio loop="loop" controls="controls">
        <source src="./music/XiaoShouLaDaShou.mp3" type="audio/mp3" />
      </audio>
    </div>
    <!--数据区-->
    <div
      style="margin: auto; text-align: center; max-width: 780px"
      class="shujuqu flex flex1 yinying"
    >
      <!--各个数据块-->
      <div style="height: auto; max-width: 380px" class="shuju flex1 baise">
        <img src="./img/002.jpg" alt="白熊前背景照" width="360px" />
      </div>
      <div style="flex-direction: column" class="baise flex flex1">
        <div
          style="height: auto; flex-direction: column; justify-content: center"
          class="shuju flex flex1 baise"
        >
          <img
            src="./img/003.jpg"
            alt="泗家中散发照"
            width="400px"
            style="margin-right: 5px"
          />
        </div>
        <div
          style="height: auto; flex-direction: column; justify-content: center"
          class="shuju flex flex1 baise"
        >
          <img
            src="./img/004.jpg"
            alt="浦江阳台自拍"
            width="400px"
            style="margin-right: 5px"
          />
        </div>
      </div>
    </div>
    <div
      style="margin: auto; text-align: center; max-width: 780px"
      class="shujuqu flex flex1 yinying baise"
    >
      <div
        style="height: auto; flex-direction: column; justify-content: center"
        class="shuju flex flex1 baise"
      >
        <div style="height: auto; flex-direction: row; justify-content: center">
          <img
            src="./img/005.jpg"
            alt="浦江KTV照"
            width="360px"
            style="margin-right: 5px"
          />
        </div>
        <div style="height: auto; flex-direction: row; justify-content: center">
          <img
            src="./img/006.jpg"
            alt="浦江KTV熟睡照"
            width="360px"
            style="margin-right: 5px"
          />
        </div>
      </div>
      <div
        style="height: auto; flex-direction: row; justify-content: center"
        class="shuju flex flex1 baise"
      >
        <img
          src="./img/007.jpg"
          alt="泗家中JK照"
          width="380px"
          style="margin-right: 5px"
        />
      </div>
    </div>
    <div
      style="
        margin: auto;
        text-align: center;
        max-width: 780px;
        flex-direction: column;
        justify-content: center;
      "
      class="shujuqu flex yinying baise"
    >
      <p
        style="
          margin: 9px;
          font-size: 25px;
          color: rgb(246, 131, 131);
          font-family: 楷体;
        "
      >
        我们的青春，才刚刚开始
      </p>
      <div style="margin: 0px">（未完待续……）</div>
      <!--用作占位-->
      <div><p></p></div>
    </div>
  </body>
</html>
